<!-- 产权类 -->
<template>
<div class='dashboard-container'>
 <el-row class="title">
    <span>基础数据</span>
  </el-row>
    <el-row :gutter="32">
          <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <el-card>
          <pie-chart v-if="JSON.stringify(pieOption1)!='{}'" :pieData="pieOption1"/>
          </el-card>
        </div>
      </el-col>
       <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <el-card>
          <pie-chart v-if="JSON.stringify(pieOption2)!='{}'" :pieData="pieOption2"/>
          </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <el-card>
          <pie-chart v-if="JSON.stringify(pieOption3)!='{}'" :pieData="pieOption3"/>
          </el-card>
        </div>
      </el-col>
    </el-row>
     <el-row class="title">
    <span>测量数据</span>
  </el-row>
      <el-row :gutter="32">
       <el-col :xs="24" :sm="24" :lg="24">
        <div class="chart-wrapper">
          <el-row :gutter="32" class="tools">
           <el-select v-model="value" size="mini" @change="selectChange" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
            </el-select>
             <el-radio-group @change="radioChange" v-model="radio" size="mini">
            <el-radio-button v-for="(item,index) in radios" :key="index" :label="item"></el-radio-button>
          </el-radio-group>
           <el-date-picker
            v-model="time"
            type="daterange"
            align="right"
            @change="dateChange"
            unlink-panels
            size="mini"
            style="float:right"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
          </el-row>
          <bar-chart v-if="JSON.stringify(barOptions)!='{}'" :height="barHeight" :barData="barOptions"/>
        </div>
      </el-col>
    </el-row>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import PieChart from "../components/PieChart";
import BarChart from "../components/BarChart";
import { getChartAdd, getChartCut, getPropertyAdd } from "@/api/charts";
import axios from "axios";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { PieChart, BarChart },
  data() {
    //这里存放数据
    return {
      options: [
        {
          value: "0",
          label: "一年同列"
        },
        {
          value: "1",
          label: "三年同列"
        }
      ],
      show: true,
      radios: ["一月", "三月", "半年", "一年", "所有"],
      barHeight: "440px",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value: "",
      radio: "",
      time: "",
      pieOptions: {},
      pieOption1: {},
      pieOption2: {},
      pieOption3: {},
      barOptions: {}
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    fetchData() {
      axios.all([getChartAdd(), getChartCut(), getPropertyAdd()]).then(
        axios.spread((chartAdd, cut, property) => {
          // this.barOptions = {
          //   title: {
          //     text: add.Title.value[0],
          //     subtext: add.Title.value[0]
          //   },
          //   legend: {
          //     data: [add.Demolition.name, add.newLease.name, add.resolve.name]
          //   },
          //   xAxis: [{ data: add.Date }],
          //   series: [
          //     {
          //       name: add.Demolition.name,
          //       data: add.Demolition.value,
          //       stack: add.Demolition.name
          //     },
          //     {
          //       name: add.newLease.name,
          //       data: add.newLease.value,
          //       stack: add.Demolition.name
          //     },
          //     {
          //       name: add.resolve.name,
          //       data: add.resolve.value,
          //       stack: add.Demolition.name
          //     }
          //   ]
          // };
          this.pieOption1 = {
            title: {
              text: "资产增加情况"
            },
            series: [
              {
                name: "资产增加情况",
                data: chartAdd
              }
            ]
          };
          this.pieOption2 = {
            title: {
              text: "资产减少情况"
            },
            series: [
              {
                name: "资产减少情况",
                data: cut
              }
            ]
          };
          this.pieOption3 = {
            title: {
              text: "办证情况"
            },
            series: [
              {
                name: "办证情况",
                data: property
              }
            ]
          };
        })
      );
    },
    selectChange(value) {
      console.log("下拉项值 ", value);
    },
    dateChange(value) {
      console.log("时间项值 ", value);
    },
    radioChange(value) {
      console.log("单选框值 ", value);
    },
    initPieData() {
      this.pieOptions = {
        color: ["#d3758f", "#f3d999", "#a4d8c2", "#a4d8c2"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          left: "center",
          bottom: "10"
        },
        calculable: true,
        title: {
          text: "欠租户数",
          backgroundColor: "#849fe2",
          textStyle: {
            color: "#fff",
            fontSize: 16
          }
        },
        series: [
          {
            name: "欠租户数",
            type: "pie",
            roseType: "radius",
            radius: [15, 95],
            center: ["50%", "38%"],
            data: [
              { value: 320, name: "未出租房屋数量" },
              { value: 0, name: "房屋出租数量" }
            ],
            animationEasing: "cubicInOut",
            animationDuration: 2600
          }
        ]
      };
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.fetchData();
    this.initPieData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.dashboard-container {
  padding: 20px;
  .el-card.is-always-shadow {
    box-shadow: 1px 4px 12px 1px #9aaddc61;
  }
  // .tools {
  //   margin-left: 50px;
  //   margin-right: 50px;
  // }
  .title {
    margin-bottom: 10px;
    border-bottom: 1px solid #dce0e4;
    padding: 14px;
    span {
      font-size: 24px;
      color: #252525;
      padding-left: 10px;
      border-left: 5px solid #409eff;
    }
  }
}
</style>